<!-- 
  完成柱状图的开发

  @since 1.0.0
  （1）完成使用固定数据进行操作
 -->
<template>
  <div id="XionganBar" ref="XionganBar"></div>
</template>

<script>
import { http } from "@/utils/requests";
import { BarEcharts } from '@/utils/echartsUtils';

export default {
  name: "XionganBar",
  data() {
    return {
      chartIns: null
    }
  },
  props: {
    year: {
      type: Number,
      default: 2020
    }
  },
  mounted() {
    // 找到挂在的元素，并获取
    const ele = document.getElementById("XionganBar");
    // 实例化chartsIns对象
    this.chartIns = new BarEcharts(ele);
    // 发送网络请求，并渲染图片
    this.httpRequest({});
    // 测试代码
    // this.chartIns.updateCharts({
    //   title: "柱状图",
    //   boundaryGap: [0, 0.001],
    //   country: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    //   year: "2001",
    //   countryData: [18203, 23489, 29034, 104970, 131744, 630230]
    // });
  },
  methods: {
    /**
     * http请求
     * @param {Object} params 传入的查询参数
     */
    httpRequest(params) {
      // http异步请求
      http.getRequest("/api/yearCountryNpp/querybyyear?year=" + this.$props.year, params).then(res => {
        this.chartIns.updateCharts(res);
      }, err => {
        console.log(err);
      });
    }
  }
}
</script>

<style scoped>
#XionganBar {
  /* TODO 需要完成对height的修改 */
  height: 300px;
  width: 450px;
  margin: 25px;
}
</style>